<template>
  <el-dialog
    :title="title[infoType]"
    :visible.sync="isDialogVisible"
    :close-on-click-modal="false"
    :before-close="onClickCancelSave"
    custom-class="dialog-form"
    width="485px"
  >
    <el-form :label-width="formLabelWidth">
      <el-form-item label="所属部门：" required>
        <!-- <el-select v-model="departmentId" placeholder="请选择" clearable filterable >
                        <el-option v-for="(item,index) in departmentList"
                                   :key="index" :label="item.name"
                                   :value="item.id">
                        </el-option>
                    </el-select> -->
        <el-cascader
          :options="options"
          v-model="departmentId"
          :show-all-levels="false"
        ></el-cascader>
        <!-- :props="{ value: 'id', label: 'name', children: 'childDepartmentTree'}" -->
      </el-form-item>
      <el-form-item label="用户名：" required>
        <el-input
          v-model="loginName"
          :maxlength="50"
          clearable
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <template v-if="infoType == 1 || infoType == 2">
        <el-form-item label="密码：" required>
          <el-input
            v-model="pwd"
            type="password"
            :maxlength="20"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="请重复密码：" required>
          <el-input
            v-model="pwdBak"
            type="password"
            :maxlength="20"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </template>
      <el-form-item label="真实姓名：" required>
        <el-input
          v-model="name"
          :maxlength="50"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio-group v-model="sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入伍日期：" class="duty-date">
        <el-date-picker
          :append-to-body="false"
          value-format="yyyy-MM-dd"
          v-model="enlistDate"
          type="date"
          :clearable="false"
          style="width: 200px;"
          placeholder="请选择"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="职位：">
        <el-input v-model="position" clearable  placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="权限分组：">
        <el-select v-model="groupId" placeholder="请选择" clearable filterable>
          <el-option
            v-for="(item, index) in permissionList"
            :key="index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联络地址：">
        <el-input v-model="address" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="联络电话：">
        <el-input v-model="mobile" placeholder="请输入" clearable></el-input>
      </el-form-item>
    </el-form>
    <div class="common-footer-box active">
      <el-button
        class="common-btn-primary "
        size="small"
        @click="onClickAddSaveData"
        >确定</el-button
      >
      <el-button size="small" @click="onClickCancelSave">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    infoType: {//1->新增 2->编辑 3->修改基础信息  
      type: Number,
    },
    userId: {
      type: String,
    },
    isDialogVisible: {
      type: Boolean,
    },
  },
  data() {
    return {
      dialogFormVisible: true, //编辑添加用户信息弹框
      formLabelWidth: "150px",
      address: "", //地址
      loginName: "", //用户名
      pwd: "", //密码
      pwdBak: "", //请重复密码
      name: "", //真实姓名
      mobile: "", //电话
      sex: 1, //性别
      groupId: "", //权限
      enlistDate: "", //入伍日期
      departmentId: [], //所属部门
      position: "", //职位
      departmentList: [],//所属部门集合 
      permissionList: [],//权限分组 所属部门集合
      options: [],
      title: { "1": "添加用户", "2": "编辑用户", "3": "修改档案" },
      url: { "1": "/user/saveUserInfoVo", "2": "/user/updateUserInfoVo", "3": "/user/updateUserInfoVo" },
    };
  },
  created() {
    console.log("======" + this.infoType);
    console.log("xxx");
    /* 
      this.initFunc();
    */
  },
  methods: {
    //初始化相关函数
    initFunc(){
      this.getDepartmentData();
      this.getPermissionData();
      this.getBaseInfo();
    },
    //用户信息--弹框交互
    onClickCancelSave() {
      this.address = "";
      this.loginName = "";
      this.pwd = "";
      this.pwdBak = "";
      this.name = "";
      this.mobile = "";
      this.sex = 1;
      this.groupId = "";
      this.enlistDate = "";
      this.departmentId = [];
      this.position = "";
      this.$emit("cancel");
    },
    //保存用户信息
    onClickAddSaveData() {
      if (this.departmentId.length == 0) {
        this.$message.error("请选择所属部门");
      } else if (this.loginName == "") {
        this.$message.error("请输入用户名");
      } else if (this.pwd == "" && this.infoType != 3) {
        this.$message.error("请输入密码");
      } else if (this.pwd.length < 6 && this.infoType != 3) {
        this.$message.error("密码长度6~20位");
      } else if (this.pwdBak == "" && this.infoType != 3) {
        this.$message.error("请输入重复密码");
      } else if (this.pwdBak != this.pwd && this.infoType != 3) {
        this.$message.error("两次密码不一致");
      } else if (this.name == "") {
        this.$message.error("请输入真实姓名");
      } else {
        let _baseInfo = {
          departmentId: this.departmentId[this.departmentId.length - 1],
          loginName: this.loginName,
          name: this.name,
          position: this.position,
          enlistDate: this.enlistDate,
          groupId: this.groupId,
          sex: this.sex,
          mobile: this.mobile,
        };
        if (this.infoType == 1) {
          _baseInfo.pwd = this.pwd;
        } else if (this.infoType == 2 || this.infoType == 3) {
          if (this.infoType == 2) {
            _baseInfo.pwd = this.pwd;
          }
          _baseInfo.id = this.userId;
        } 
        this.$axios
          .post(url[this.infoType], { _baseInfo})
          .then((res) => {
            if (res.data.code === 200) {
              this.$emit("success");
            } else {
              this.$message.error(res.data.msg);
            }
          });
      }
    },
    // 获取用户信息
    getBaseInfo() {
      this.$axios.get("/user/getUserInfoVo?id="+this.userId).then((res) => {
        if (res.data.code === 200) {
          let data = res.data.data;
            Object.keys(data).forEach((item) => {
              this[item] = data[item];
            });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },// 获取所属部门集合???
    getDepartmentData() {
      this.$axios.get("/user/logout").then((res) => {
        if (res.data.code === 200) {
          this.departmentList = [...res.data.data];
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 获取权限分组???
    getPermissionData() {
      this.$axios.get("/user/logout").then((res) => {
        if (res.data.code === 200) {
           this.permissionList = [...res.data.data];
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>
<style scoped></style>
